{{ extend './layout/main.html'}}

{{block 'content'}}

<div class="container">
    <div class="page-header">
        <h1><a href="/music/index">我的音乐</a><small>--添加音乐</small></h1>
    </div>
</div>
<div class="container">
    <form id="form" method="post" action="/">
        <div class="form-group">
            <label for="title">歌曲标题</label>
            <input type="text" name="title" id="title" class="form-control" placeholder="请输入歌曲标题">
        </div>
        <div class="form-group">
            <label for="singer">歌手</label>
            <input type="text" name="singer" id="singer" class="form-control" placeholder="请输入歌手姓名">
        </div>
        <div class="form-group">
            <label for="time">歌曲时长</label>
            <input type="text" name="time" id="time" class="form-control" placeholder="请输入歌曲时长">
        </div>
        <div class="form-group">
            <label for="file">歌曲文件</label>
            <input type="file" name="file" id="file">
            <p class="help-block">请上传歌曲文件.</p>
        </div>
        <div class="form-group">
            <label for="lrc">歌词文件</label>
            <input type="file" name="lrc" id="lrc">
            <p class="help-block">请上传歌词文件.</p>
        </div>
        <button type="submit" class="btn btn-success">点击添加</button>
    </form>
</div>

<script type="text/javascript">
    $('#form').on('submit', function (e) {
        e.preventDefault();
        // 创建数据载体
        var fd = new FormData();
        // 获取所有的input
        var inputs = document.querySelectorAll('input');
        fd.append('title', inputs[0].value);
        fd.append('singer', inputs[1].value);
        fd.append('time', inputs[2].value);
        // type="file" value就是文件的路径
        fd.append('file', inputs[3].files[0]);
        fd.append('lrc', inputs[4].files[0]);

        // 发起请求
        $.ajax({
            type: 'post',
            url: '/music/addMusic',
            data: fd,
            // jquery.js:8970 Uncaught TypeError: Illegal invocation
            processData: false, // 不需要转数据
            contentType: false, // 不需要设置content-type
            dataType: 'json',
            success: function (data) {
                if (data.code === '001') {
                    if (confirm('添加成功!是否去听歌?')) {
                        location.href = '/music/index';
                    }
                } else {
                    alert(data.message);
                }
            }
        })
    });
</script>
{{/block}}

